<template>
    <div class="login">
        <el-row>
            <el-col :span="5" :offset="9">
                <el-card>
                    <el-form :model="form" label-position="left" label-width="70px">
                        <el-form-item label="账号">
                            <el-input v-model="form.username" ></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item label-width="0px">
                            <el-button type="primary" @click="login()">
                                登陆
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {userLogin} from '@/api/user'
export default {
    name:'Login',
    data(){
        return {
            form:{
                username:'',
                password:''
            }
        }
    },
    methods:{
        login(){
            userLogin(this.form).then((res) => {
                if(res.data.code != 200){
                    this.$message({
                        type:'warning',
                        message:'账号或密码错误'
                    })
                }else{
                    this.$store.commit('asideOptions/CLEARMENU')
                    this.$store.commit('asideOptions/CHANGEMENU',res.data.permission)
                    this.$store.commit('asideOptions/ADDROUTER',this.$router)
                    this.$store.dispatch('userOptions/setToken',res.data.token)
                    // 跳转路由
                    this.$router.push({name:'main'})
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.el-card{
    margin-top: 50%;
    height: 280px;
    .el-form{
        margin-top: 40px;
        .el-button{
            width: 100%;
        }
    }
}
</style>